<template>
  <view class="container">
    <!-- 新增：个人头像区域 -->
    <view class="avatar-section">
      <image 
        :src="avatarUrl" 
        class="avatar" 
        mode="aspectFill"
        @click="chooseAvatar"
      />
      <text class="avatar-tip">点击更换头像</text>
    </view>

    <!-- 原有功能区域保持不变 -->
    <view class="section">
      <button @click="chooseAndPreviewImage">选择本地图片并预览</button>
      <image v-if="localImageUrl" :src="localImageUrl" mode="widthFix" class="preview-image" />
    </view>

    <view class="section">
      <button @click="goToWeatherPage">获取明天天气预报</button>
      <view v-if="weatherInfo" class="weather-info">
        <view>日期：{{ weatherInfo.date }}</view>
        <view>星期：{{ weatherInfo.week }}</view>
        <view>最高温：{{ weatherInfo.high }}°C</view>
        <view>最低温：{{ weatherInfo.low }}°C</view>
      </view>
    </view>

    <view class="section">
      <button @click="downloadNetworkImage">下载网络图片</button>
      <image v-if="networkImageUrl" :src="networkImageUrl" mode="widthFix" class="preview-image" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      localImageUrl: '', 
      weatherInfo: null, 
      networkImageUrl: '',
      avatarUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' 
    };
  },
  methods: {
    // 选择头像
    chooseAvatar() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.avatarUrl = res.tempFilePaths[0];
        }
      });
    },

    // 跳转到天气页面
    goToWeatherPage() {
      uni.navigateTo({
        url: '/pages/weather/weather' 
      });
    },

    // 选择本地图片并预览
    chooseAndPreviewImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePaths = res.tempFilePaths;
          this.localImageUrl = tempFilePaths[0];
          uni.previewImage({
            current: tempFilePaths[0],
            urls: tempFilePaths
          });
        }
      });
    },

    // 获取天气信息
    getWeatherInfo() {
      uni.request({
        url: 'https://t.weather.sojson.com/api/weather/city/101230501',
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200 && res.data.status === 200) {
            const tomorrow = res.data.data.forecast[1];
            this.weatherInfo = {
              date: tomorrow.date,
              week: tomorrow.week,
              high: tomorrow.high.replace('高温 ', ''),
              low: tomorrow.low.replace('低温 ', '')
            };
          } else {
            uni.showToast({ title: '获取天气失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        }
      });
    },

    // 下载网络图片
    downloadNetworkImage() {
      uni.showLoading({ title: '下载中...' });
      uni.downloadFile({
        url: 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg',
        success: (downloadRes) => {
          if (downloadRes.statusCode === 200) {
            this.networkImageUrl = downloadRes.tempFilePath;
            uni.hideLoading();
            uni.showToast({ title: '下载成功', icon: 'success' });
          }
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({ title: '下载失败', icon: 'none' });
        },
        progress: (progressRes) => {
          console.log('下载进度：' + progressRes.progress + '%');
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}

/* 头像区域样式 */
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}
.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 2rpx solid #eee;
}
.avatar-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

/* 通用区域样式 */
.section {
  margin-bottom: 40rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}
.preview-image {
  width: 100%;
  margin-top: 20rpx;
}
.weather-info {
  margin-top: 20rpx;
  line-height: 1.8;
}
button {
  margin-bottom: 20rpx;
}
</style>